<template>
  <div id="app" @click.once="onInitPlayer" class="dark-schema">
    <keep-alive>
      <router-view/>
    </keep-alive>
    <!-- 由于 better-scroll 设置了 transform 属性，我不得不将 search 组件从 discover/index.vue 移到这里 -->
    <home-search/>
    <player/>
  </div>
</template>

<script>
import Player from '@/views/player/index'
import HomeSearch from '@/views/search/Search.vue'

function setVh () {
  const vh = window.innerHeight * 0.01
  document.documentElement.style.setProperty('--vh', `${vh}px`)
  window.addEventListener('resize', () => {
    const vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
  })
}

export default {
  components: {
    HomeSearch,
    Player
  },
  beforeCreate () {
    setVh()
  },
  mounted () {
    // this.initHistory()
  },
  methods: {
    /**
     * 为了提高用户体验，chrome 设定只有用户的操作才能控制音乐播放，因此，不能通过监听歌曲 url 更改来控制音乐的第一次播放
     * 此处为 Hack：在用户第一次触摸屏幕时获得 audio 的控制权
     * Uncaught (in promise) DOMException: The element has no supported sources.
     */
    onInitPlayer () {
      this.$store.dispatch('player/initPlayer')
    },
    initHistory () {
      // this.$router.isBack = false
      this.$storage.setItem('history', ['/'])
    }
  }
}
</script>
